'use strict';

// // 一、基础题
// // 1. 已知一个三角形的底为10，高为5，请尝试声明底和高两个变量，并求出这个三角形的面积，在控制台进行打印。
// //  提示：三角形的面积=(底*高)/2

// var betton = 10, height = 5;
// var res = (betton * height) / 2
// console.log(res);



// // // 2. 请编写一个程序，可以求出1到100之间所有偶数的和，并在控制台打印。
// var a = 0;
// for (var i = 1; i <= 100; i++) {
//     if(i%2==0){
//         a += i;
//     }

    
// }


// console.log(a);


// // // // 3. 请使用相关数学函数在1 ~ 10000随机取一个数，并在控制台打印。

// var ran = Math.floor(Math.random() * 10000);

// console.log(ran);





// // // 4. 请声明一个函数，传入参数为绩效分数score，根据如下规则进行判断并返回相关字符串：
// // //  90~100：返回 考核等级S，奖励3倍工资
// // //  80~89：返回 考核等级A，奖励2倍工资
// // //  70~79：返回 考核等级B，奖励1倍工资
// // //  60~69：返回 等级C，不奖励，需要继续努力
// // //  0~59：返回 考核等级D，考核较差，需要再观察或者劝退


// var score = function (a) {

//     if (typeof (a) == 'number') {

//         if (a > 90 && a <= 100) {
//             return '考核等级S，奖励3倍工资'
//         }
//         if (a > 80 && a <= 90) {
//             return '考核等级A，奖励2倍工资'
//         }
//         if (a > 70 && a <= 80) {
//             return '考核等级B，奖励1倍工资'
//         }
//         if (a > 60 && a <= 70) {
//             return '等级C，不奖励，需要继续努力'
//         }
//         if (a > 0 && a <= 60) {
//             return '考核等级D，考核较差，需要再观察或者劝退'
//         }
//         else {
//             return '请输入一个数0-100之间的数';
//         }
//     }

// }

// var res1 = score(90)
// console.log(res1);



// // // 5. 请声明一个函数，传入参数为正整数n，函数内计算n!，并返回结果。
// // //  提示：请注意对参数进行校验。
// // //  提示：n! = 1 * 2 * 3 * ... * n

// var res2 = function (n) {
//     var d = 1;

//     if (typeof (n) == 'number') {
//         for (var i = 1; i <= n; i++) {
//             d = d * i
//         }     
//          return d;

//     }

// }
// var rr=res2(5)
// console.log(rr);



// // 6. 请声明一个函数，传入参数为字符串str，在函数内移除str首尾空格，然后计算长度，并返回长度

// var  str='   123c   123  ';

// function res(str){
//      str=str.trim();

//     return str.length;
// }

// var a=res(str);
// console.log(a);

// // // 7. 请声明一个匿名函数，传入参数为数组arr，在函数内对数组并进行求和，返回和。
// // //  调用这个函数，传入数组参数：[10,30,50,22]，打印函数返回结果

// var arr=[10,30,50,22];
// var p=0;
// var res=(function (arr){
//    for(var i=0;i<arr.length;i++){
//          p+=arr[i]; 
//    }

//    return p;
// })


// console.log(res(arr));


// // 8. 已知一个数组为：[ 1, 4, 3, 2 ]，
// //  请关使用数组相的方法检测元素 3 在数组中是否存在，
// //  存在则在控制打印出相应的下标，否则打印不存在。

// var arr=[1,4,3,2];


// for(var i=0;i<arr.length;i++){
//     var off=arr.indexOf(3)
// }
// if(off>0){
//     console.log(off);
//  }
//  else{
//      console.log('不存在');
//  }





// // 9. 已知一个用户对象为：{id: 1, name: "庄周", desc: "辅助"}，
// //  请尝试声明一个变量表示上面这个对象，
// //  然后给这个对象增加一个性别属性，属性名称为：sex，属性值为：男。
// //  最后在控制台打印这个对象。


// var res={
//     id: 1, 
//     name: "庄周", 
//     desc: "辅助"
// }
// res.sex='男';

// console.log(res);




// // 10. 声明一个学生类，包含：姓名（name）、性别（gender）、生日字段（birthday）
// //  实例化一个学生对象，学生相关属性为：
// //      姓名：鬼谷子
// //      性别：男
// //      生日：2002-07-28
// //  实例化完成之后，在控制台打印这个对象。

// function Student(name,gender,brithday) {

//     this.name=name;
//     this.gender=gender;
//     this.brithday=brithday;    
// }

// var res=new Student();

// res.name='鬼谷子';
// res.gender='男';
// res.brithday='2002-07-28';

// console.log(res);





// // 一、困难题
// /* <!-- 第一题大题 --> */
// //请利用构造函数定义Cat，并让所有的Cat对象有一个name属性，并共享一个方法say()，返回字符串'Hello, xxx!'：

// var name='';
// function Cat(name) {
//     this.name=name

// }

// Cat.prototype.say=function(){

//     return 'Hello, '+this.name+'!';

// }



// // 测试:
// var kitty = new Cat('Kitty');
// var doraemon = new Cat('哆啦A梦');


// console.log( kitty.say); 
// console.log( doraemon.say); 
// console.log( kitty.say === doraemon.say); 



// if (kitty && kitty.name === 'Kitty'
//     && kitty.say
//     && typeof kitty.say === 'function'
//     && kitty.say() === 'Hello, Kitty!'
//     && kitty.say == doraemon.say
// ) {
//     console.log('测试通过!');
// } else {
//     console.log('测试失败!');
// }







// /* <!-- 第二题大题 --> */
// //按字符串顺序重新排序DOM节点：


// var ul=document.getElementById('test-list');

// for (var i = 0; i < ul.children.length;i++) {

//     var res = ul.children[i];
//     if (res.innerHTML == 'JavaScript' || res.innerHTML == 'HTML' || res.innerHTML == 'CSS') {

//     } else { 
//         ul.removeChild(res);
//     }
// }
// console.log(ul);


// // 测试:
// (function () {
//     var
//         arr, i,
//         t = document.getElementById('test-list');

     
//     if (t && t.children && t.children.length === 3) {
//         arr = [];
//         for (i = 0; i < t.children.length; i++) {
//             arr.push(t.children[i].innerText);
//         }

//         console.log(arr);

//         if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
//             console.log('测试通过!');
//         }
//         else {
//             console.log('测试失败: ' + arr.toString());
//         }
//     }
//     else {
//         console.log('测试失败!');
//     }
// })();






// /* <!-- 第三题大题 --> */
// // 选择<p>JavaScript</p>:
// var js =document.getElementById('test-p');
// console.log(js);
// // // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
//  var arr =document.getElementsByClassName('c-red c-green')[0].getElementsByTagName('p');
// console.log(arr);
// // // 选择<p>Haskell</p>:
// var haskell =document.getElementsByClassName('c-green')[1].children[1];
// console.log(haskell);
// // 测试:
// if (!js || js.innerText !== 'JavaScript') {
//     alert('选择JavaScript失败!');
// } else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
//     console.log('选择Python,Ruby,Swift失败!');
// } else if (!haskell || haskell.innerText !== 'Haskell') {
//     console.log('选择Haskell失败!');
// } else {
//     console.log('测试通过!');
// }







/* <!-- 第四题大题 --> */
//  使用jQuery选择器分别选出指定元素：

// + 仅选择JavaScript
//  var selected = $('p#para-1');
//  console.log(selected[0].innerText);
 
// + 仅选择Erlang
// var selected = $('p.color-red.color-green');
//  console.log(selected[0].innerText);

// + 选择JavaScript和Erlang
// var selected = $('p.color-red');
// for(var i=0;i<selected.length;i++){
//     console.log(selected[i].innerText);
// }
 
// + 选择所有编程语言
// var selected = $('p.color-red,p.color-green,p[name="name"]');
// for(var i=0;i<selected.length;i++){
//         console.log(selected[i].innerText);
//     }

// + 选择名字input
// var selected = $('fieldset input[name="name"]');

// + 选择邮件和名字input 
// var selected = $('input[name="name"],input[name="email"]');


// 高亮结果:
// if (!(selected instanceof jQuery)) {
//   console.log('不是有效的jQuery对象!');
// }
// $('#test-jquery').find('*').css('background-color', '');
// selected.css('background-color', '#ffd351');






// /* <!-- 第五题大题 --> */
// // 输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，
//例如：`{"name":"Michael","email":...}`

// 'use strict';
// var res={};

// res.name=$('input[name="name"]').val();
// res.email=$('input[name="email"]').val();
// res.Password=$('input[name="password"]').val();
// res.Gender=$('input[name="gender"]').val();
// res.City=$('select[name="city"]').val();

// //将res转化为JSON字符串
//  var json =JSON.stringify(res) ;

// if(typeof(json) === 'string'){
//     console.log(json);
// }
// else{
//     console.log('json变量不是string!');
// }






// /* <!-- 第六题大题 --> */
// //除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
// var div=$('#test-div>ul');

// //添加标签
// div.append('<li><span>Pascal</span></li>');
// div.append('<li><span>Lua</span></li>');
// div.append('<li><span>Ruby</span></li>');

// var res=$('#test-div span');

// var arr=[];
// for(var i=0;i<res.length;i++){
//    var p=res[i].innerText;
//     arr.push(p);
// }

// //排序
// arr.sort();


// for(var i=0;i<res.length;i++){
//     for(var k=0;k<=i;k++){
         
//         //将排序后的值赋给html的文本
//         res[i].innerText =arr[k];     
//      }
//  }



// (function () {
//     var s = $('#test-div>ul>li').map(function () {
//         return $(this).text();
//     }).get().join(',');
//     if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
//         console.log('测试通过!');
//     } else {
//         console.log('测试失败: ' + s);
//     }
// })();


/* <!-- 第七题大题 --> */
/* 
+ 绑定合适的事件处理函数，实现以下逻辑：

+ 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

+ 当用户去掉“全不选”时，自动不选中所有语言；

+ 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

+ 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

+ 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
 */

var
form = $('#test-form'),
langs = form.find('[name=lang]'),  //每个选择框
selectAll = form.find('label.selectAll :checkbox'), //全选的框
selectAllLabel = form.find('label.selectAll span.selectAll'),//全选的文本
deselectAllLabel = form.find('label.selectAll span.deselectAll'),//全不选的文本
invertSelect = form.find('a.invertSelect');      //反选
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
e.preventDefault();
alert(form.serialize());
});
// TODO:绑定事件


//选择框  
selectAll.change(function() {
  //当全选被选中
    if(this.checked){
    
    //每个小选择框
     langs.prop('checked',true);
     
     //显示全不选的文本
     deselectAllLabel.show();

     //隐藏全不选的文本
    selectAllLabel.hide();
   }

   //否则全不选
   else{
      //每个小选择框
     langs.prop('checked',false);
     //显示全选
     selectAllLabel.show();
     //隐藏全不选
      deselectAllLabel.hide();
   }
})

//反选单击事件
invertSelect.click(function (){
  
  //遍历每一个选泽框
  langs.each(function () {
     if(this.checked){
       this.checked=false;
     }
     else{
      this.checked=true;
     }
  }) 
  
})


var len=langs.length;

langs.click(function (){
  var count=0;

   //遍历每一个选泽框
  langs.each(function (){
       if(this.checked){  
         count+=1;
       }   
  });

  //如果全都选中了
  if(count==langs.length){
    
     //文本框状态全选
      selectAllLabel.checked=true;
      //显示全不选的文本
      deselectAllLabel.show();
      //隐藏全选的文本
      selectAllLabel.hide();
  }
  else{
    //文本框状态全不选
     selectAll.checked=false;
     //显示全选的文本
     selectAllLabel.show();
     deselectAllLabel.hide();
  }
} );
